//提供一个构造函数
function ProgressBar(option) {
    //初始化操作
    this._init(option)
}
//设置原型对象
ProgressBar.prototype = {
    //修正构造器属性
    constructor:ProgressBar,
    //初始化方法
    _init:function (option) {
        option = option || {};
        this.x = option.x || 0;
        this.y = option.y || 0;
        this.width = option.width || 0;
        this.height = option.height|| 0;
        this.fill = option.fill || 'gray';
        this.stroke = option.stroke || "black";
        this.strokeWidth = this.strokeWidth || 10;
        this.value = option.value || 0.1;
        this.cornerRadius = option.cornerRadius || 5;
    },
    render:function (layer) {
        this.group = new Konva.Group();
        layer.add(this.group);
        //创建里面的矩形
        var innerRect = new Konva.Rect({
            x:this.x,
            y:this.y,
            width:this.width * this.value,
            height:this.height,
            fill:this.fill,
            id:"innerRect"
        });
        this.group.add(innerRect);

        //创建外面的矩形
        var outerRect = new Konva.Rect({
            x:this.x,
            y:this.y,
            width:this.width,
            height:this.height,
            stroke:this.stroke,
            strokeWidth:this.strokeWidth,
            cornerRadius:this.cornerRadius
        });
        this.group.add(outerRect);
    },
    //更新
    update:function () {
// findOne找到组中某一个对象
        var rect = this.group.findOne('#innerRect');

        // 做动画
        rect.to({
            width : this.width, // 要做动画的属性
            duration : 3,//  动画的时间
            easing: Konva.Easings.EaseInOut,
            // yoyo: true,
            onFinish: function() {
                console.log('动画执行完毕后会自动调用');
            }
        });
    }
};